<template>
	<view class="container">
		<u-toast ref="tip"></u-toast>
		<view class="title-container">
			<view class="back-login-contianer" @click="goLogin">
				<u-icon name="arrow-left" size="28">></u-icon>
			</view>
			<view class="message-container">
				<view class="login-title">新用户注册</view>
			</view>
		</view>
		<view class="input-container">
			<input class="login-input u-border-bottom" type="text" style="font-size: 30rpx;" v-model="user.username" placeholder="请输入用户名" @input="inputValue(arguments, 'username')"/>
			<input class="login-input u-border-bottom" type="password" style="font-size: 30rpx;" v-model="user.password" placeholder="请输入密码" @input="inputValue(arguments, 'password')"/>
			<input class="login-input u-border-bottom" type="password" style="font-size: 30rpx;" v-model="user.repassword" placeholder="请输入确认密码" @input="inputValue(arguments, 'repassword')"/>
			<input class="login-input u-border-bottom" type="number" style="font-size: 30rpx;" v-model="user.phone" placeholder="请输入手机号码" @input="inputValue(arguments, 'phone')"/>
			<view class="password-container u-border-bottom">
				<input class="login-input" type="number" style="font-size: 30rpx;" v-model="user.code" placeholder="请输入验证码" @input="inputValue(arguments, 'code')"/>
				<u-button @click="sendCode" color="#4271ff" :plain="true" shape="circle" style="width: 360rpx"
					type="primary" :disabled="!sendFlag" :text="btnText"></u-button>
			</view>
			<input class="login-input u-border-bottom" type="text" style="font-size: 30rpx;" v-model="user.email" placeholder="请输入邮箱" @input="inputValue(arguments, 'email')"/>
		</view>
		<view :class="registerFlag && hasSendCode ? 'can-login-btn' : 'no-login-btn-click'" @click="register">注册</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasSendCode: false,
				user: {
					username: '',
					password: '',
					repassword: '',
					phone: '',
					code: '',
					email: '',
				},
				placeholder: '请输入密码',
				btnText: '发送验证码',
				registerFlag: false,
				totalTime: 180,
				sendFlag: false,
				userInfo: {},
				phoneStr: /^(0|86|17951)?(13[0-9]|15[012356789]|16[6]|19[89]]|17[01345678]|18[0-9]|14[579])[0-9]{8}$/,
				codeStr: /^\d{4}$/,
			}
		},
		onLoad() {

		},
		onReady() {
			// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
			// this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			/**
			 * 注册
			 */
			register() {
				var that = this;
				var arr = Object.keys(this.user);
				for (var i = 0; i < arr.length; i++) {
					if (!this.user[arr[i]]) {
						that.errorTips(that.$refs.tip, "请先填写完表单数据", null);
					}
				}
				that.$req.register(this.user).then(res => {
					if (!res.success) {
						that.errorTips(that.$refs.tip, res.message, null);
						return;
					}
					that.successTips(that.$refs.tip, '注册成功，自动跳转到登录页面', null);
					setTimeout(() => {
						this.goLogin();
					}, 2000)
				})
			},
			/**
			 * 返回登录页面
			 */
			goLogin() {
				this.redirectTo("/login/index");
			},
			/**
			 * 发送验证码
			 */
			sendCode() {
				if (!this.user.phone) {
					return;
				}
				var that = this;
				this.$req.getCode({phone: this.user.phone}).then(res => {
					if (!res.success) {
						that.errorTips(that.$refs.tip, res.message, null);
						return;
					}
					console.log(res, "res");
					that.successTips(that.$refs.tip, "发送成功", null);
				});
				this.getCodeCallBack();
				this.hasSendCode = true;
			},
			/**
			 * 倒计时
			 */
			getCodeCallBack() {
				this.btnText = this.totalTime + 's后重新发送';
				let clock = setInterval(() => {
					this.totalTime--
					this.btnText = this.totalTime + 's后重新发送'
					if (this.totalTime <= 160) {
						clearInterval(clock)
						this.btnText = '重新发送验证码'
						this.totalTime = 180
						this.sendFlag = true
					}
				}, 1000)
				this.clock = clock;
			},
			/**
			 * 输入
			 */
			inputValue(e, column) {
				// e.detail.value 是输入的值
				var flag = true;
				if (column == 'phone' && this.user.phone && this.phoneStr.test(this.user.phone)) {
					this.sendFlag = true;
				}
				var arr = Object.keys(this.user);
				for (var i = 0; i < arr.length; i++) {
					if (!this.user[arr[i]]) {
						flag = false;
						break;
					}
				}
				this.registerFlag = flag;
			},
		}
	}
</script>

<style  lang="scss">
	/* 设置背景颜色 */
	page {
		padding-top: var(--status-bar-height);
		background-color: $themeColor;
		box-sizing: border-box;
		height: calc(100vh - 250rpx);
		// 字体
		font-family: Simsun;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		position: relative;
	}

	.container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 40rpx 40rpx;
		display: flex;
		flex-direction: column;

	}

	/* 标题容器 */
	.title-container {
		width: 100%;
		height: 200rpx;
		text-align: center;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		
		
		.back-login-contianer {
			position: absolute;
			left: -15rpx;
			top: 0;
			width: 80rpx;
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			// background-color: red;
		}
		
	}

	.img-container {
		width: 45%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.img-container image {
		width: 60rpx;
		height: 60rpx;
	}

	.message-container {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.login-title {
		font-size: 50rpx;
		font-weight: 600;
	}

	.login-title2 {
		font-weight: 100;
		color: #8a8e93;
		font-size: 25rpx;
	}

	.input-container {
		width: 100%;
		height: 720rpx;
	}

	.login-input {
		width: 100%;
		height: 120rpx;
	}

	.phone-container{
		width: 100%;
		height: 500rpx;
		background-color: red;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.password-container, .phone-container {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.send-code {
		width: 80%;
		display: block;
		text-align: right;
		margin-right: 10rpx;
	}

	.can-login-btn {
		margin-top: 80rpx;
		width: 100%;
		height: 100rpx;
		background-color: #4271ff;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		color: white;
		font-size: 40rpx;
	}

	.no-login-btn-click {
		margin-top: 60rpx;
		width: 100%;
		height: 100rpx;
		background-color: #cacaca;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		color: white;
		font-size: 40rpx;
	}

	.login-type-container {
		width: 100%;
		height: 100rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;

		.login-cannot-get-code {
			color: $typefaceGreyColor;
		}

	}

	.tip-container {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-size: 20rpx;
	}

	.tips-color {
		color: blue;
	}
</style>
